【Day9】製作wordpress主題前的基本準備：本地wordpress架設與編碼工具準備

第 12 屆 iThome 鐵人賽

DAY 9

Modern Web

讓0基礎的你也能製作簡單wordpress主題系列第 9 篇

12th鐵人賽 xampp wordpress主題製作新手篇 visual studio code

thewayeasy

2020-09-24 22:22:29

2022 瀏覽

分享至

工欲善其事，必先利其器。要製作出wordpress主題，當然要先把必要的軟件，準備下來吧。那麼究竟有甚麼是必要準備的呢?

1：一個下載在你電腦的wordpress
2：編碼工具

下載在電腦的wordpress

相信，大家平常使用wordpress的時，都會在線上製作吧，你們會購買一個網域，並租用虛擬伺服器如siteground等，然後在線上透過wordpress編輯。

雖然製作wordpress主題的時候，也可以這樣做。但這樣會出現兩大問題：

1. 上載速度慢

為什麼上載速度會慢?也許可以先先看看下面這個比喻：

相信大家也知道直達航班和轉機航班吧，相比直達航班，轉機航班通常至少需要停留一個中轉機場，才能到達目的地。

線上製作，就如轉機航班，需要經過中轉機場：虛擬伺服器、網絡，才能把你更改的，顯示出來。而直接在自己電腦製作，則如直航航班，省卻了中轉站的部分，只需要直接在電腦透過瀏覽器開啟便可以看到了，而即時離線工作，亦同樣暢通無阻，這對比起線上製作的，當然快得多吧。

2.不便於測試

雖說wordpress 是對用家蠻有善的，但wordpress裏的插件和主題之間，仍不時會出現衝突，導致您的網站最終開啟不了。假若，你是在發佈了的網站進行編輯。那麼，你的網站就會因為這樣而關閉，若你沒有備份的話，那麼你可能就需要到伺服器公司裏，要求回復這個網站在他們伺服器的備份資料。雖然最終還能夠復原，但無可否認，這樣不但費時，也大大影響客流量。

在自己電腦編輯的話，只需要把網頁備份下來製作就可以了。不會影響到自己的網站了，也能夠容許你不斷嘗試、測試、出錯，直到沒問題後才上載回去。

如何把wordpress裝在電腦上並正常運行呢?

步驟一：安裝xampp並完成設定

相信大家也知道，假如你希望電腦能夠順利運行手機遊戲，那麼則需要下載一個手機模擬器，讓電腦具備執行手機遊戲的條件。在這裡也是相同道理，我們需要為電腦下載一個能夠模擬架站的系統，好讓我們的電腦能夠運行wordpress。而這個系統，就是xampp了。

首先我們前往Apache Friends ，下載Xampp

下載完成後開啟，假如有運行防毒軟件，可能會出現安全警告，只需要按yes就可以了。之後我們會進入這個面板

xampp安裝畫面

按next，在這裡，我們只需要選擇 MySQL以及 PHPMyAdmin，有了這兩項，就已經能夠順利在自己電腦運行wordpress。完成後按next。

只需要MySQL以及 PHPMyAdmin就足夠運行wordpress

之後我們會見到folder位置設置的介面，選擇完成後按next。然後，到語言設定介面，由於只有english，按next就可以了。

這裡會出現Bitnami for XAMPP這個版面。

不需要bitnami

由於這對我們而言並沒有必要的，只需要取消勾選，然後按next就可以了，電腦這時會開始自動下載，耐心等待喔。

完成後按finish，之後我們會進入這個版面

xampp控制台版面

我們按start來啟動頭兩項項目，假如連接正常的話會轉為綠色的

成功後會變為綠色

另外我們亦可在瀏覽器輸入http://localhost/ 進行測試，若運作正常則會出現下面畫面

apache成功連接後的畫面

步驟二：加入wordpress檔案並建立資料庫

首先我們前往wordpress官網下載wordpress檔

完成後，到xampp的檔案位置，假如沒更改過的則是c：／／xampp，打開xampp文件，打開htdocs

htdocs的大概位置

然後創建一個新資料夾並重新命名

在htdocs內創建一個新檔案

最後再把剛下載的wordpress檔案，解壓並放到檔案內，完成後如下圖：

把wordpress檔案放到htdocs後的大概情況

接著我們開啟剛才設定好的xampp，點擊MySQL那行的admin，

Mysql的admin位置在第二行第二個

進入phpMyadmin的頁面後點選資料庫，

php admin裏，資料庫的位置

在這裡輸入名稱,然後按建立，注意名稱要記得啊，之後會用到的，當然不記得還是可以回來看！

建立資料庫的方法

步驟三: 登入wordpress

開啟瀏覽器，輸入http://localhost/在htdocs裏創建的檔案名稱，然後就會出現以下介面，例如我就會是http://localhost/newtheme

選擇合適語言然後繼續
wordpress選擇語言的版面

這裡和平常的輸入方法會有不同，輸入方法如下：
資料函式庫名稱：在phpadmin中創了的名稱
帳戶：『root』
密碼：留空

在設定函式庫資料時需要輸入的資料

完成後summit，最後這裡和往常一樣輸入就可以了。

登入資料和平常一樣輸入手可以了

終於設定完成啦^^

編碼工具

編碼工具，主要是要來方面你輸入程式碼的，市面上的編碼工具很多，很多也不錯用，個人則較為習慣使用visual studio code。 https://code.visualstudio.com/

visual studio code基本設定教學

安裝外掛擴充套件

visual studio code 有不少方便的外掛插件，讓你的製作過程更加方便，以下是一些個人認為蠻合適新手安裝的插件，你們可以先下載，然後之後再慢慢了解對你有什麼幫助和怎樣設定。

Bracket Pair Colorizer : 用顏色改變括號的顏色，讓易讀性提高

Bracket Pair Colorizer示範

Highlight maching tag：當你點到編碼時，會把整句用顏色highlight

Highlight maching tag示範

live server：毋須在文件夾，直接在內裡按go live就能夠即時到瀏覽器查看

下載方法：
點擊旁邊第五個圖示，然後在search那裡直接搜尋並install就可以了，

如何安裝必要插件

自動排版+縮行+auto save

假如你不希望你的編碼看起來是這樣子的
混亂的編碼

而是像這樣子的

整潔的編碼

那麼你就需要這個設定了:

按下底的設定按鈕，選擇settings，然後按右上角的open settings，接著把下面的編碼放進去就可以了

｛
 //自動儲存
 "files.autoSave": "afterDelay" 
 //字體大小  
 "editor.tabSize": 1,  
 //自動換行
 "editor.wordWrap": "on"   
 // 儲存時會自動幫你排列好編碼
 "editor.formatOnSave": true, 
 //貼上時會自動幫你排列好編碼
 "editor.fomatOnPaste": true,  
｝

若你下載了上方建議的插件，那麼就需要額外加入下方的編碼，讓那些插件能夠運作起來。

{
  //Bracket Pair Colorizer Setting
  "highlight-matching-tag.styles": {
    "opening": {
      "left": {
        "custom": {
          "borderWidth": "0 0 0 1px",
          "borderStyle": "solid",
          "borderColor": "yellow",
          "borderRadius": "5px",
          "overviewRulerColor": "white"
        }
      },
      "right": {
        "custom": {
          "borderWidth": "0 1px 0 0",
          "borderStyle": "solid",
          "borderColor": "yellow",
          "borderRadius": "5px",
          "overviewRulerColor": "white"
        }
      }
    }
  }
  // Highlight maching tag setting
  "bracketPairColorizer.forceIterationColorCycle": true,
  // live server setting
  "liveServer.settings.donotVerifyTags": true,
  "liveServer.settings.donotShowInfoMsg": true,
}

好了基本軟件的準備大概就到這裡了，有甚麼問題的可以在下方留言喔^^